<template>
  <div class="user-navigation">
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <i class="el-icon-user-solid"></i>
          <span>个人资料</span>
        </div>
      </template>
      <el-menu default-active="1" class="el-menu-vertical-demo">
        <el-menu-item index="1" @click="router.push('/user/userIntroduce')">
          <i class="el-icon-user"></i>
          <span>个人详情</span>
        </el-menu-item>
        <el-menu-item index="2">
          <i class="el-icon-setting"></i>
          <span>账号设置</span>
        </el-menu-item>
        <el-menu-item index="3">
          <i class="el-icon-bell"></i>
          <span>消息设置</span>
        </el-menu-item>
        <el-menu-item index="4">
          <i class="el-icon-circle-close"></i>
          <span>屏蔽管理</span>
        </el-menu-item>
        <el-menu-item index="5">
          <i class="el-icon-collection-tag"></i>
          <span>标签管理</span>
        </el-menu-item>
      </el-menu>
    </el-card>
  </div>
</template>

<script setup>
import router from '@/router';
</script>

<style scoped>
.user-navigation {
  width: 350px; /* 设置宽度 */
  height: 800px; /* 设置高度 */
}

.box-card {
  border-radius: 8px; /* 圆角 */
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1); /* 阴影效果 */
  height: 800px;
}

.card-header {
  display: flex;
  align-items: center;
  font-size: 16px;
  color: #409eff; /* 蓝色字体 */
}

.card-header i {
  margin-right: 8px;
}

.el-menu {
  border: none; /* 去掉默认边框 */
}

.el-menu-item {
  height: 40px; /* 设置菜单项高度 */
  line-height: 40px; /* 垂直居中 */
  padding-left: 32px; /* 左侧内边距 */
}

.el-menu-item i {
  margin-right: 8px;
}
</style>
